import styled from "styled-components";
import Heading from "../ui/Heading";

const StyledLoginPage = styled.div`
  min-width: 70vw;
  min-height: 75vh;
  // align-items: center;
  // justify-content: center;
  gap: 3.2rem;
  background-color: var(--color-grey-200);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
`;

const Header = styled.header`
  padding: 15rem 13rem 0 10rem;
`;

const ContainerInput = styled.div`
  width: 37%;
  height: 50%;
  // align-items: center;
  // justify-content: center;
  text-align: right;
  margin-top: 7rem;
`;

const Footer = styled.footer`
  width: 100%;
`;

const InputGroup = styled.div`
  margin-bottom: 2rem;
`;

const Input = styled.input`
  background-color: var(--color-grey-100);
  width: 25rem;
  height: 4.5rem;
  padding: 1rem;
  border: 0.2rem solid var(--color-grey-400);
  border-radius: var(--border-radius-md);
  &:focus {
    color: var(--color-indigo-700);
    background-color: var(--color-grey-100);
    outline-color: var(--color-indigo-700);
    box-shadow: -3px -3px 15px var(--color-indigo-700);
    transition: 0.1s;
    transition-property: box-shadow;
  }
`;

const Button = styled.button`
  width: 12.5rem;
  height: 4.5rem;
  border-radius: var(--border-radius-lg);
  background-color: var(--color-grey-200);
  margin-right: 8rem;
  font-size: 2rem;
  border: 0.2rem solid var(--color-grey-400);
  &:hover {
    background-color: var(--color-grey-400);
    border-color: var(--color-grey-400);
  }
`;

const Label = styled.label`
  font-size: 2rem;
  font-weight: bold;
  color: var(--color-grey-600);
`;

const A = styled.a`
  margin-top: 0.1rem;
  font-size: 1.5rem;
  display: block;
  &:hover {
    color: var(--color-indigo-700);
    text-decoration: underline;
    cursor: pointer;
  }
`;

const Row = styled.div`
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
`;

const BackgroundImg = styled.div`
  position: absolute;
  // float: right;
  height: 100%;
  width: 100%;
  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);
    background-color: rgba(255, 255, 255, 0.5);
  }
`;

const Image = styled.img`
  height: 100%;
  width: 100%;
`;

function LoginPage() {
  return (
    <StyledLoginPage>
      <BackgroundImg>
        <Image src="loginBackground.jpg" alt="背景图片"></Image>
      </BackgroundImg>
      <Row>
        <Header>
          <Heading as="h2">登录</Heading>
          <Heading as="h3">请输入您的用户名和密码</Heading>
        </Header>
        <ContainerInput>
          <UsernameInput />
          <PasswordInput />
          <Button>登录</Button>
        </ContainerInput>
        <Footer></Footer>
      </Row>
    </StyledLoginPage>
  );
}

function UsernameInput() {
  return (
    <InputGroup>
      <Label>用户名：</Label>
      <Input type="text" placeholder="请输入用户名" />
    </InputGroup>
  );
}

function PasswordInput() {
  return (
    <InputGroup>
      <Label>密码：</Label>
      <Input type="password" placeholder="请输入密码" />
      <A href="">还没有注册？点击注册</A>
    </InputGroup>
  );
}

export default LoginPage;
